import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: root
    width: 320
    height: 480
    color: "#ffffff"
    radius: 10
    border.color: "#e0e0e0"
    border.width: 1

    property date selectedDateTime: new Date()

    function updateDateTime() {
        if (!yearTumbler.currentItem || !dayTumbler.currentItem) return;
        
        let newDate = new Date(selectedDateTime)
        let year = parseInt(yearTumbler.currentItem.text)
        let month = monthTumbler.currentIndex
        let day = parseInt(dayTumbler.currentItem.text)
        let hours = hoursTumbler.currentIndex
        let minutes = minutesTumbler.currentIndex

        // 验证日期是否有效
        if (isNaN(year) || isNaN(day)) return;
        
        newDate.setFullYear(year)
        newDate.setMonth(month)
        newDate.setDate(day)
        newDate.setHours(hours)
        newDate.setMinutes(minutes)
        
        if (newDate.getTime() === selectedDateTime.getTime()) return;
        selectedDateTime = newDate
    }

    // 计算指定年月的天数
    function getDaysInMonth(year, month) {
        return new Date(year, month + 1, 0).getDate()
    }

    Component.onCompleted: {
        let currentDate = new Date()
        yearTumbler.currentIndex = yearTumbler.model.indexOf(currentDate.getFullYear().toString())
        monthTumbler.currentIndex = currentDate.getMonth()
        dayTumbler.currentIndex = currentDate.getDate() - 1
        hoursTumbler.currentIndex = currentDate.getHours()
        minutesTumbler.currentIndex = currentDate.getMinutes()
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 10

        Text {
            Layout.alignment: Qt.AlignHCenter
            text: "选择日期和时间"
            font.pixelSize: 20
            color: "#333333"
            Layout.topMargin: 20
        }

        Rectangle {
            Layout.alignment: Qt.AlignHCenter
            Layout.preferredWidth: parent.width - 20
            Layout.preferredHeight: 200
            color: "transparent"

            Row {
                anchors.centerIn: parent
                spacing: 5

                Tumbler {
                    id: yearTumbler
                    model: Array.from({length: 21}, (_, i) => (2020 + i).toString())
                    height: 200
                    width: 80
                    
                    delegate: Text {
                        text: modelData
                        color: Tumbler.tumbler.currentIndex === index ? "#1976D2" : "#666666"
                        font.pixelSize: Tumbler.tumbler.currentIndex === index ? 22 : 18
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
                    }
                    onCurrentIndexChanged: Qt.callLater(updateDateTime)
                }

                Tumbler {
                    id: monthTumbler
                    model: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
                    height: 200
                    width: 60
                    
                    delegate: Text {
                        text: modelData
                        color: Tumbler.tumbler.currentIndex === index ? "#1976D2" : "#666666"
                        font.pixelSize: Tumbler.tumbler.currentIndex === index ? 22 : 18
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
                    }
                    onCurrentIndexChanged: {
                        // 更新日期选择器的天数范围
                        if (yearTumbler.currentItem) {
                            let year = parseInt(yearTumbler.currentItem.text)
                            let daysInMonth = getDaysInMonth(year, currentIndex)
                            dayTumbler.model = daysInMonth
                            Qt.callLater(updateDateTime)
                        }
                    }
                }

                Tumbler {
                    id: dayTumbler
                    model: 31
                    height: 200
                    width: 60
                    
                    delegate: Text {
                        text: (modelData + 1).toString()
                        color: Tumbler.tumbler.currentIndex === index ? "#1976D2" : "#666666"
                        font.pixelSize: Tumbler.tumbler.currentIndex === index ? 22 : 18
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
                    }
                    onCurrentIndexChanged: Qt.callLater(updateDateTime)
                }
            }
        }

        Rectangle {
            Layout.alignment: Qt.AlignHCenter
            Layout.preferredWidth: parent.width - 20
            Layout.preferredHeight: 200
            color: "transparent"

            Row {
                anchors.centerIn: parent
                spacing: 5

                Tumbler {
                    id: hoursTumbler
                    model: 24
                    height: 200
                    width: 60
                    
                    delegate: Text {
                        text: modelData.toString().padStart(2, '0')
                        color: Tumbler.tumbler.currentIndex === index ? "#1976D2" : "#666666"
                        font.pixelSize: Tumbler.tumbler.currentIndex === index ? 22 : 18
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
                    }
                    onCurrentIndexChanged: Qt.callLater(updateDateTime)
                }

                Text {
                    text: ":"
                    font.pixelSize: 24
                    anchors.verticalCenter: parent.verticalCenter
                    color: "#333333"
                }

                Tumbler {
                    id: minutesTumbler
                    model: 60
                    height: 200
                    width: 60
                    
                    delegate: Text {
                        text: modelData.toString().padStart(2, '0')
                        color: Tumbler.tumbler.currentIndex === index ? "#1976D2" : "#666666"
                        font.pixelSize: Tumbler.tumbler.currentIndex === index ? 22 : 18
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
                    }
                    onCurrentIndexChanged: Qt.callLater(updateDateTime)
                }
            }
        }

        Text {
            Layout.alignment: Qt.AlignHCenter
            text: selectedDateTime.toLocaleString(Qt.locale(), "yyyy年MM月dd日 hh:mm")
            font.pixelSize: 18
            color: "#1976D2"
        }
    }
} 